<template>
  <div class="scanlifee" style="float: left">
    <div class="erweima" id="qrcode"></div>

    <div class="scanlifeFont">
      <h3>使用微信扫描上方二维码进行支付</h3>
      <p>此订单支付完成后，不可退单</p>
      <p>超过15分钟未支付，订单自动取消</p>
    </div>
  </div>
</template>
<script>
import QRCode from 'qrcodejs2' // 引入qrcode生产二维码的
export default {
  data () {
    return {}
  },
  mounted () {
    this.qrcode()
  },
  methods: {
    qrcode () {
      // 生成二维码
      var that = this
      let qrcode = new QRCode('qrcode', {
        text: that.erweima.code_url, // 二维码内容
        background: '#f0f',
        foreground: '#ff0',
        width: 150,
        height: 150
      })
      console.log(qrcode)
    }
  },
  props: ['erweima']
}
</script>

<style lang="stylus" scoped>
@import '../../../../static/css/color.styl';

.scanlifee {
  position: relative;
  width: 5rem;
  height: 6.55rem;
  background-color: $color-white;
  border-radius: 0.2rem;
  margin: 0 0.2rem;
  padding-top: 0.5rem;
  text-align: center;

  .erweima {
    height: 180px;
    width: 180px;
    text-align: center;
    position: absolute;
    top: 62%
    left: 62%;
    margin: -248px 0 0 -128px;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .scanlifeFont{
    position: absolute;
    bottom: 120px;
    left: 0px;
    right: 0px;
    h3 {
    padding-top: 0.3rem;
    font-size: 0.28rem;
    color: $color-main;
    margin-bottom: 0.3rem;
  }

  p {
    font-size: 0.22rem;
    color: $color-aaa;
    margin-bottom: 0.3em;
  }
}

p {
  margin-bottom: 0.2rem !important;
}
  }

</style>
